//其中createRouter创建路由；createWebHistory代表路由使用 HTML5 模式，也是推荐使用的模式；RouteRecordRaw声明的对象会被当做路由对象，放入到路由对象池里。
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
//获取登录状态
import {useAuthStore} from '../stores/auth'
import Test from '../pages/test/Test.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/auth',         //传参时使用
        component: () => import('../pages/auth/App.vue'),   //路由监听的组件
        children: [
            {
                path: '', // 空路径，当访问/auth时，会显示这个子路由
                redirect: 'auth/login'  // 重定向到login,或者404都可以
            },
            {
                path: 'login',
                meta: {title: '登录'},
                name: 'Login',
                component: () => import('../pages/auth/Login.vue')  //如果有多个页面 可以使用 components
            },
            {
                path: 'register',   //子路由  【注意没有'/'】
                meta: {title: '注册'},
                name: 'Register',
                component: () => import('../pages/auth/Register.vue')  //如果有多个页面 可以使用 components
            },
        ],
    },
    // {
    //     path: '/',
    //     name: 'Home',
    //     component: () => import('../pages/App.vue'),  //通过js默认挂载的
    //     meta: {requiresAuth: false}, // 需要登录
    //
    // },
    {
        path: '/index',         //传参时使用
        meta: {title: '首页'},
        component: () => import('../pages/index/Index.vue'),
        name: 'index',
        children: [
            {
                path: '', // 空路径，当访问/auth时，会显示这个子路由
                //redirect: 'auth/login'  // 重定向到login,或者404都可以
                component: () => import('../pages/index/Test.vue'),
            }
        ]
    },
    {
        path: '/test',         //传参时使用
        meta: {title: '测试学习页面'},
        component: () => Test,
        name: 'Test',
    },
    {
        path: '/404',
        component: () => import('../pages/404.vue') // 你的404页面组件
    },

    {
        path: '/:pathMatch(.*)*', // 使用自定义正则表达式捕获所有未匹配的路由
        redirect: '/404' // 重定向到404页面
    }
]

const router = createRouter({
    history: createWebHistory(),

    strict: true,  //严格检查路径末尾是否有尾部斜线 默认false
    //sensitive:true, //使路由匹配区分大小写  默认false
    routes
})

//路由守卫
//在beforeEach中全局检测用户是否登录；
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    const title: string = String(to.meta.title);  //强制转换
    if (title) {
        document.title = title;
    }

    const auth = useAuthStore()   //
    if (to.meta.requiresAuth && !auth.isLoggedIn) {
        next({
            path: '/auth/login',
            query: {redirect: to.fullPath} // 保存目标路径用于登录后跳转,这里和next用法一致
        })
    } else {
        next()
    }

})

export default router
